<template>
  <div class="course-management-page">
    <div class="course-list-container">
      <el-card class="user-info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>用户基本信息</span>
          </div>
        </template>
        <div v-if="loading" class="loading-tip">
          <el-skeleton active :count="6"></el-skeleton>
        </div>
        <div v-else class="user-info-content">
          <el-descriptions column="1" bordered>
            <el-descriptions-item label="用户ID">
              <span class="info-value">{{ userInfo?.userID }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用户名">
              <span class="info-value">{{ userInfo?.name }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              <span class="info-value">{{ userInfo?.email }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="会员状态">
              <el-tag :type="userInfo?.isVIP === '1' ? 'success' : 'info'" size="medium">
                {{ userInfo?.isVIP === '1' ? '会员' : '非会员' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="账号状态">
              <el-tag :type="userInfo?.isFrozen === 1 ? 'danger' : 'success'" size="medium">
                {{ userInfo?.isFrozen === 1 ? '已冻结' : '正常' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="用户角色">
              <el-tag type="primary" size="medium">
                {{ highestRole }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="logout-button-container">
          <el-button type="danger" size="default" @click="handleLogout">
            <i class="el-icon-switch-button"></i> 退出登录
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElCard, ElDescriptions, ElDescriptionsItem, ElTag, ElSkeleton, ElMessage, ElButton, ElMessageBox } from 'element-plus';
import { getUserInfo } from '@/api/user.js';

const userInfo = ref({});
const loading = ref(true);

onMounted(() => {
  fetchUserInfo();
});

const fetchUserInfo = async () => {
  try {
    const res = await getUserInfo();

    if (res.code === 1) {
      userInfo.value = res.data;
    } else {
      ElMessage.error(res.message || '获取用户信息失败');
    }
  } catch (error) {
    ElMessage.error('网络错误，请稍后重试');
    console.error('请求用户信息出错：', error);
  } finally {
    loading.value = false;
  }
};

// 计算属性：获取最高权限角色
const highestRole = computed(() => {
  const roles = userInfo.value.roles || [];

  if (!Array.isArray(roles) || roles.length === 0) {
    return '无角色权限';
  }

  const roleMap = {
    1: '普通用户',
    2: '课程资料管理员',
    3: '系统管理员',
    4: '公司领导'
  };

  // 获取最高角色ID（数值最大）
  const highestRoleId = Math.max(...roles);

  return roleMap[highestRoleId] || '未知角色';
});

// 退出登录处理
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 清除本地存储中的用户信息（如果有）
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');

    // 跳转到登录页
    window.location.href = '/login';
  }).catch(() => {
    // 取消操作
  });
};
</script>

<style scoped>
/* 样式保持不变 */
.course-management-page {
  padding: 20px;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.course-list-container {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.user-info-card {
  width: 600px;
  margin: 0 auto;
  position: relative;
}

.card-header {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.user-info-content {
  margin-top: 16px;
}

/* 放大用户信息字体 */
.info-value {
  font-size: 18px;
}

.el-descriptions-item__label {
  font-size: 16px;
}

/* 退出登录按钮样式 */
.logout-button-container {
  position: absolute;
  bottom: 30px; /* 下移10px */
  right: 20px;
}

.el-button--medium {
  padding: 0 20px;
  height: 40px; /* 增大按钮高度 */
  font-size: 14px;
}

.el-button--medium i {
  margin-right: 8px; /* 增大图标间距 */
}

.loading-tip {
  padding: 20px;
}
</style>